iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
1
自我挑戰組

迷路的前端工程系列 第 6

第六日:表單和超連結

  • 分享至 

  • xImage
  •  

第五日回顧:
我們在昨天介紹了關於圖片、影片和音樂三個相關的標籤,到昨天為止,只要再加上 CSS 的排版技術我們就可以完成一些基礎的網頁囉,不過為了提高網站的可用性我們還是要加入一些可以讓用戶去操作的功能,像是表單和超連結之類的,而這就是我們今天的主題啦~表單和超連結

今天一開始就讓我們先來介紹超連結吧,這個在各大網站被用到爛掉的東西到今天才講也是很微妙...

<a href="" target="">敘述</a>

這邊挑兩個常用的參數介紹:
1.href:href 內與 src 一樣是填入路徑,不過與 src不同的是 href 是建立一個與路徑內容的通道,而 src 是把內容鑲嵌進入網頁當中。
2.target:target內有兩個常用的配置:
A._self:默認屬性,進入連結的方法是會替代掉自己的網頁
B._blank:進入新網頁的方法是開一個新的分頁

超連結講完了,我們先來介紹表單的開胃菜,按鈕吧
(不過在還沒使用 JavaScript 前表單和按鈕基本上都只是擺飾品...

<button type="">敘述</button>

button 內的 type 常用的有兩種屬性:
A.submit:默認屬性,會將表單內容傳送到表單指定的位置當中
B.button:沒有任何默認行為,單純的一個按鈕

接下來就是表單的建立~

<form action="">
    <label>敘述</label>
    <input type="" />
</form>

關於表單現在不會介紹太多,等到 JS 章節要用到會再介紹,先有個樣子就好
一個表單的建立會是由一個 form 標籤宣告開始,而其內部的 action 屬性內是填寫要將資料送達的位置,
而內部會是由多組的 label 和 input 標籤組成,label 標籤會與 input 標籤綁在一起,當你點選 label 標籤時會自動跳到他所代表的 input 標籤當中, 而 input 標籤具有非常多種型態可以使用,像是日期、文字輸入框、單選鍵等等,他應該會是你數一數二用到爛掉的東西。

其實今天內容也沒什麼,先有個概念,看看就好,明天的佈局講完後就正式進入 CSS環節啦~歡呼

小抱怨專區:
都假日了還想抱怨什麼呢,睡太飽?


上一篇
第五日:多媒體
下一篇
第七日:網頁區塊
系列文
迷路的前端工程16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言